<template>
    <div class="container">

        <div class="content">
            <div class="top">
                <div class="header">
                    <img alt="logo" class="logo"
                         :src="SiteSeoConfig.siteLogo"/>
                    <span class="title">{{SiteSeoConfig.siteName}}</span>
                </div>
                <div class="desc">{{SiteSeoConfig.siteLongName}} {{SiteSeoConfig.siteVersion}}</div>
            </div>
            <div class="login">

                <a-form-model ref="ruleForm" :model="form" :rules="rules"
                              :label-col="labelCol"
                              :wrapper-col="wrapperCol"
                              @submit.prevent="onSubmit"
                              id="formLogin"
                              class="user-layout-login"
                >


                    <a-form-model-item prop="account" ref="account">
                        <a-input id="account"
                                 placeholder="登录账号"
                                 size="large"
                                 v-model="form.account">
                            <a-icon slot="prefix" type="user"/>
                        </a-input>


                    </a-form-model-item>

                    <a-form-model-item prop="password" ref="password">
                        <a-input-password
                                id="password"
                                placeholder="登录密码"
                                size="large"
                                v-model="form.password">
                            <a-icon slot="prefix" type="lock"/>
                        </a-input-password>
                    </a-form-model-item>

                    <a-form-item style="margin-top:24px">
                        <a-button
                                id="loginBtn"
                                block
                                size="large"
                                type="primary"
                                htmlType="submit"
                                class="login-button"
                        >确定
                        </a-button>



                    </a-form-item>


                    <a-form-model-item>
                        <a-checkbox>自动登录</a-checkbox>
                        <router-link :to="{ path:'/find/password' }">忘记密码</router-link>
                    </a-form-model-item>


                </a-form-model>
                <div class="user-login-other">
                    <span>其他登录方式</span>
                    <a>
                        <a-icon class="item-icon" type="alipay-circle"></a-icon>
                    </a>
                    <a>
                        <a-icon class="item-icon" type="taobao-circle"></a-icon>
                    </a>
                    <a>
                        <a-icon class="item-icon" type="weibo-circle"></a-icon>
                    </a>
                    <router-link class="register" :to="{ name: 'register' }">注册账户</router-link>
                </div>
                </a-form>

            </div>
        </div>
    </div>
</template>
<script>


    import {operatorLogin, getWebConfig} from '../../util/open.api';
    import {getOperatorInfo} from '../../util/internal.api.js';
    import less from 'less'

    export default {
        name: 'Login',

        data() {
            return {
                labelCol: {
                    span: 0
                },
                wrapperCol: {
                    span: 24
                },

                form: {
                    account: null,
                    password: null

                },
                rules: {
                    account: {
                        required: true,
                        message: '请填写登录账号',
                        trigger: 'blur'
                    },


                    password: {
                        required: true,
                        message: '请填写登录密码',
                        trigger: 'blur'
                    }


                },


                logging: false,
                error: '',
                SiteSeoConfig: {},
            };
        },
        methods: {

            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        this.loginDone(this.form);
                    }
                });
            },


            //读取系统配置
            async init() {
                await getWebConfig("adminVersion").then(
                    res => {
                        this.SiteSeoConfig = res
                        document.title = res.siteName + "- 用户登录";
                    });
            },


            greetings() {

                let date = new Date();
                if (date.getHours() >= 0 && date.getHours() < 12) {
                    return "上午好";


                } else if (date.getHours() >= 12 && date.getHours() < 18) {

                    return "下午好";

                } else {

                    return "晚上好";

                }

            },

            loginDone(dataObj) {
                operatorLogin(dataObj).then(res => {
                    this.logging = false;

                    if (res.code === 0) {


                        //存储令牌
                        this.$store.commit('setAuthorizations', res.data.token);
                        //存储员工信息
                        getOperatorInfo().then(res => {
                            this.$store.commit('setOperatorInfo', res.data.operator);
                            this.$notification.success({
                                message: '登录成功',
                                description: this.greetings() + res.data.operator.name + ",欢迎回来！",
                            });
                            //登录跳转
                            this.$router.push({path: '/layout/welcome'});
                        });


                    } else {
                        this.$notification.error({
                            message: '登录失败',
                            description: res.message
                        });

                    }
                });
            },

            huanfu() {
                less.modifyVars({
                    '@primary-color': 'red',
                });

            }

        },


        created() {


            this.init();
        },
        mounted() {
            window.vue = this
        }
    }
</script>

<style lang="less" scoped>
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: auto;
        background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
        background-size: 100%;

        .content {
            padding: 32px 0;
            flex: 1;

            @media (min-width: 768px) {
                padding: 112px 0 24px;
            }

            .top {
                text-align: center;

                .header {
                    height: 44px;
                    line-height: 44px;

                    a {
                        text-decoration: none;
                    }

                    .logo {
                        height: 44px;
                        vertical-align: top;
                        margin-right: 16px;
                    }

                    .title {
                        font-size: 33px;
                        color: rgba(0, 0, 0, 0.85);
                        font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
                        font-weight: 600;
                        position: relative;
                        top: 2px;
                    }
                }

                .desc {
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.45);
                    margin-top: 12px;
                    margin-bottom: 40px;
                }
            }

            .login {
                width: 368px;
                margin: 0 auto;

                @media screen and (max-width: 576px) {
                    width: 95%;
                }

                @media screen and (max-width: 320px) {
                    .captcha-button {
                        font-size: 14px;
                    }
                }

                .icon {
                    font-size: 24px;
                    color: rgba(0, 0, 0, 0.2);
                    margin-left: 16px;
                    vertical-align: middle;
                    cursor: pointer;
                    transition: color 0.3s;

                    &:hover {
                        color: #1890ff;
                    }
                }
            }
        }
    }

    .user-login-other {
        text-align: left;
        margin-top: 24px;
        line-height: 22px;

        .item-icon {
            font-size: 24px;
            color: rgba(0, 0, 0, 0.2);
            margin-left: 16px;
            vertical-align: middle;
            cursor: pointer;
            transition: color 0.3s;

            &:hover {
                color: #1890ff;
            }
        }
    }
</style>
